<template>
  <div class="message-container">
    <el-card class="message-card">
      <template #header>
        <div class="message-header">
          <h3>消息中心</h3>
          <div class="message-actions">
            <el-button type="primary" size="small" @click="markAllRead">全部已读</el-button>
            <el-button type="danger" size="small" @click="deleteSelected">删除选中</el-button>
          </div>
        </div>
      </template>
      
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="系统消息" name="system">
          <el-empty v-if="systemMessages.length === 0" description="暂无系统消息" />
          <div v-else class="message-list">
            <el-table
              :data="systemMessages"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="状态" width="80">
                <template #default="scope">
                  <el-tag :type="scope.row.isRead ? 'info' : 'danger'" size="small">
                    {{ scope.row.isRead ? '已读' : '未读' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题" />
              <el-table-column prop="createTime" label="时间" width="180" />
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="viewMessage(scope.row)"
                  >
                    查看
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="deleteMessage(scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="悬赏消息" name="bounty">
          <el-empty v-if="bountyMessages.length === 0" description="暂无悬赏消息" />
          <div v-else class="message-list">
            <el-table
              :data="bountyMessages"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="状态" width="80">
                <template #default="scope">
                  <el-tag :type="scope.row.isRead ? 'info' : 'danger'" size="small">
                    {{ scope.row.isRead ? '已读' : '未读' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题" />
              <el-table-column prop="createTime" label="时间" width="180" />
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="viewMessage(scope.row)"
                  >
                    查看
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="deleteMessage(scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 消息详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentMessage.title"
      width="50%"
    >
      <div class="message-detail">
        <div class="message-info">
          <span>发送时间：{{ currentMessage.createTime }}</span>
        </div>
        <div class="message-content">
          {{ currentMessage.content }}
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleReply" v-if="activeTab === 'bounty'">
            回复
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 当前选中的标签页
const activeTab = ref('system')

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 选中的消息
const selectedMessages = ref([])

// 对话框
const dialogVisible = ref(false)
const currentMessage = ref({
  id: 0,
  title: '',
  content: '',
  createTime: '',
  isRead: false
})

// 系统消息
const systemMessages = ref([
  {
    id: 1,
    title: '系统维护通知',
    content: '尊敬的用户，系统将于2023年5月10日凌晨2点至4点进行维护升级，期间可能无法正常访问，请提前做好准备。',
    createTime: '2023-05-08 10:00:00',
    isRead: false
  },
  {
    id: 2,
    title: '账号安全提醒',
    content: '您的账号近期有异常登录行为，请及时修改密码并开启双重认证以保障账号安全。',
    createTime: '2023-05-07 15:30:00',
    isRead: true
  }
])

// 悬赏消息
const bountyMessages = ref([
  {
    id: 3,
    title: '您的悬赏已被接单',
    content: '您发布的"帮忙修复电脑蓝屏问题"悬赏已被用户"技术大神"接单，请及时联系对方。',
    createTime: '2023-05-06 09:15:00',
    isRead: false
  },
  {
    id: 4,
    title: '悬赏完成通知',
    content: '您接取的"寻找家教辅导高中数学"悬赏已被确认完成，赏金已发放到您的账户。',
    createTime: '2023-05-05 14:20:00',
    isRead: true
  }
])

// 计算当前显示的消息列表
const currentMessages = computed(() => {
  return activeTab.value === 'system' ? systemMessages.value : bountyMessages.value
})

// 处理标签页切换
const handleTabClick = () => {
  currentPage.value = 1
  fetchMessages()
}

// 处理选择变化
const handleSelectionChange = (val: any) => {
  selectedMessages.value = val
}

// 分页大小变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  fetchMessages()
}

// 页码变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchMessages()
}

// 查看消息
const viewMessage = (message: any) => {
  currentMessage.value = { ...message }
  dialogVisible.value = true
  
  // 如果消息未读，则标记为已读
  if (!message.isRead) {
    markAsRead(message.id)
  }
}

// 标记消息为已读
const markAsRead = (id: number) => {
  // 这里应该调用标记已读的API
  // 模拟API调用
  if (activeTab.value === 'system') {
    const index = systemMessages.value.findIndex(item => item.id === id)
    if (index !== -1) {
      systemMessages.value[index].isRead = true
    }
  } else {
    const index = bountyMessages.value.findIndex(item => item.id === id)
    if (index !== -1) {
      bountyMessages.value[index].isRead = true
    }
  }
}

// 标记全部已读
const markAllRead = () => {
  ElMessageBox.confirm('确定要将全部消息标记为已读吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该调用标记全部已读的API
    if (activeTab.value === 'system') {
      systemMessages.value.forEach(item => {
        item.isRead = true
      })
    } else {
      bountyMessages.value.forEach(item => {
        item.isRead = true
      })
    }
    ElMessage.success('已将全部消息标记为已读')
  }).catch(() => {
    // 取消操作
  })
}

// 删除消息
const deleteMessage = (message: any) => {
  ElMessageBox.confirm('确定要删除该消息吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该调用删除消息的API
    // 模拟API调用
    if (activeTab.value === 'system') {
      const index = systemMessages.value.findIndex(item => item.id === message.id)
      if (index !== -1) {
        systemMessages.value.splice(index, 1)
      }
    } else {
      const index = bountyMessages.value.findIndex(item => item.id === message.id)
      if (index !== -1) {
        bountyMessages.value.splice(index, 1)
      }
    }
    ElMessage.success('删除成功')
  }).catch(() => {
    // 取消操作
  })
}

// 删除选中的消息
const deleteSelected = () => {
  if (selectedMessages.value.length === 0) {
    ElMessage.warning('请先选择要删除的消息')
    return
  }
  
  ElMessageBox.confirm(`确定要删除选中的 ${selectedMessages.value.length} 条消息吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该调用批量删除消息的API
    // 模拟API调用
    const ids = selectedMessages.value.map((item: any) => item.id)
    
    if (activeTab.value === 'system') {
      systemMessages.value = systemMessages.value.filter(item => !ids.includes(item.id))
    } else {
      bountyMessages.value = bountyMessages.value.filter(item => !ids.includes(item.id))
    }
    
    ElMessage.success('删除成功')
  }).catch(() => {
    // 取消操作
  })
}

// 回复消息
const handleReply = () => {
  // 这里可以实现回复消息的逻辑
  ElMessage.success('回复功能待实现')
  dialogVisible.value = false
}

// 获取消息列表
const fetchMessages = () => {
  // 这里应该调用获取消息列表的API
  // 模拟API调用
  const messages = activeTab.value === 'system' ? systemMessages.value : bountyMessages.value
  
  // 模拟分页
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  
  // 更新总数
  total.value = messages.length
}

// 初始化
onMounted(() => {
  fetchMessages()
})
</script>

<style scoped>
.message-container {
  padding: 0;
}

.message-card {
  width: 100%;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-actions {
  display: flex;
  gap: 10px;
}

.message-list {
  margin-top: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.message-detail {
  padding: 10px;
}

.message-info {
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.message-content {
  line-height: 1.6;
  white-space: pre-wrap;
}
</style>